<template>
   <div>
    <Card >
      <div style="max-height: 300px;overflow: auto;">
       <el-table :data="tableData" style="width: 100%" class="styleTable">
        <el-table-column prop="level" label="等级"  class-name="title"/>
        <el-table-column prop="date" label="时间"  class-name="title"/>

        <el-table-column prop="name" label="设备编号" class-name="title" show-overflow-tooltip />
        <el-table-column prop="address" label="详情" class-name="title" show-overflow-tooltip/>
       </el-table>
      </div>
    </Card>
   </div>
</template>
<script setup>
import Card from '../card.vue'
import { ref } from "vue" 
const tableData = [
  {
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  
  {
    date: '2016-05-02',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
   {
    date: '2016-05-04',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
]
</script>

<style scoped lang="css" >
.styleTable{
  background: transparent !important;
}
.styleTable ::v-deep .el-table th.el-table_cell,
::v-deep .el-table th,
::v-deep .el-table tr
{
  color: #fff;
  background: transparent !important;
}
.title{
  color: red;
}
</style>